import React, { useState } from 'react'
import '../Foot/style.scss'
import { Button, Popup, Ellipsis, Stepper } from 'antd-mobile'
import Icon from '@c/Icon'
import PropTypes from 'prop-types'
export default function index(props: any) {  
  const [visible, setVisible] = useState(false)
  return (
    <div className='foot'>
      <div className='foot-one'>
        <Icon name='icon-test2' size={22} />
        <p>客服</p>
      </div>
      <div className='foot-two'>
        <Icon name='icon-test' size={22} />
        <p>购物车</p>
      </div>
      <Button color='danger' size='large'
        onClick={
          () => {
            setVisible(true)
          }
        }
      >加入购物车</Button>
      <Button color='warning' size='large'>立即购买</Button>
      {/* 弹出层 */}
      <Popup
        visible={visible}
        onMaskClick={() => {
          setVisible(false)
        }}
        bodyStyle={{
          borderTopLeftRadius: '8px',
          borderTopRightRadius: '8px',
          minHeight: '40vh',
        }}
      >
        <div className="foot-mink">
          <img src={props.mink.pic} alt="" />
          <div className="foot-mink-left">
            <Ellipsis direction='end' content={props.mink.name} />
            <div className="foot-mink-left-bot">
              <p>￥{props.mink.minPrice}</p>
              <Stepper
                defaultValue={props.mink.number}
                onChange={value => {
                  props.setMink({
                    ...props.mink,
                    number: value
                  })
                }}
              />
            </div>
          </div>
        </div>
      </Popup>
    </div>
  )
}
index.propTypes = {
  mink: PropTypes.any.isRequired,
  setMink: PropTypes.any.isRequired
}
